<template>
	<view v-if="isLoad" class="container">
    <view class="h2">维修清单：</view>
    <view class="table">
      <view class="tr title">
        <view class="th" v-for="(item,index) in columns2" :key="index" :class="{'flex4':index==0}">{{item.label}}</view>
      </view>
      <view class="tr" v-for="(it,i) in repairMap.list" :key="i" :class="'b-b'">
        <template  v-for="(item,index) in columns2">
          <view v-if="index==0" class="td flexT" :key="index">
            <view><image :src="it.icon" /></view>
            <view class="detail">
              <text>{{it.oname}}</text>
              <text class="text">{{it.typeName}}</text>
            </view>
          </view>
          <view v-else class="td" :key="index">
            {{it[item.key]}}
          </view>
        </template>
      </view>
    </view>
    <block v-if="zengbu.totalFee">
      <view class="h2 flexT">
        <text class="title">其他维修：</text>
      </view>
      <view class="table">
        <view class="tr title">
          <view class="th" v-for="(item,index) in columns3" :key="index">{{item.label}}</view>
        </view>
        <view class="b-b cartList">
          <view class="item-wrap tr">
            <view class="td">
              {{zengbu.repairName||zengbu.oname}}
            </view>
            <view class="td">
              {{zengbu.totalFee|price}}
            </view>
          </view>
        </view>
      </view>
    </block>
    <view class="total flexT">
      <text class="label">共维修{{repairMap.list.length + (zengbu.totalFee?1:0)}}次</text>
      <text class="label">合计：</text>
      <text class="price">¥{{repairFee|price}}</text>
    </view>
    <block v-if="fixType==1">
      <view class="h2">材料清单：</view>
      <view class="table">
        <view class="tr title">
          <view class="th" v-for="(item,index) in columns" :key="index" :class="{'flex4':index==0}">{{item.label}}</view>
        </view>
        <view class="tr" v-for="(it,i) in productMap.list" :key="i" :class="'b-b'">
          <template  v-for="(item,index) in columns">
            <view v-if="index==0" class="td flexT" :key="index">
              <view><image :src="it.icon" /></view>
              <view class="detail">
                <text>{{it.brandName}}{{it.oname}}</text>
                <text class="text">{{it.typeName}}</text>
              </view>
            </view>
            <view v-else class="td" :key="index">
              {{it[item.key]}}
            </view>
          </template>
        </view>
      </view>
      <block v-if="zengProduct.totalFee">
        <view class="h2 flexT">
          <text class="title">其他材料：</text>
        </view>
        <view class="table">
          <view class="tr title">
            <view class="th" v-for="(item,index) in columns3" :key="index">{{item.label}}</view>
          </view>
          <view class="b-b cartList">
            <view class="item-wrap tr">
              <view class="td">
                {{zengProduct.profile}}
              </view>
              <view class="td">
                {{zengProduct.totalFee|price}}
              </view>
            </view>
          </view>
        </view>
      </block>
      <view class="total flexT">
        <text class="label">共{{productMap.list.length + (zengProduct.totalFee?1:0)}}件</text>
        <text class="label">合计：</text>
        <text class="price">¥{{productFee|price}}</text>
      </view>
    </block>
    <!-- <block>
      <view class="h2 total flexT mT2" v-if="fixType==1">
        <text class="title">上门费：</text>
        <view class="right">
          <text class="label">合计：</text>
          <text class="price">¥{{callFee|price}}</text>
        </view>
      </view>
    </block> -->
    <view class="total flexT fixed">
      <text class="label">总价：</text>
      <text class="price">¥{{total|price}}</text>
      <text v-if="stateTip==3" class="btn-link" @click="postUpdate">确定</text>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        isLoad:false,
        columns:[{
          key:'oname',
          label:'名称/材料类目/品牌'
        },
        {
          key:'specification',
          label:'规格'
        },{
          key:'number',
          label:'数量'
        },
        {
          key:'price',
          label:'单价'
        }],
        columns2:[{
          key:'oname',
          label:'维修内容 维修类目'
        },{
          key:'number',
          label:'次'
        },
        {
          key:'price',
          label:'单价'
        },
        {
          key:'totalFee',
          label:'总价'
        }],
        columns3:[{
          key:'oname',
          label:'增补内容'
        },
        {
          key:'totalFee',
          label:'总价'
        }],
        repairMap:{},
        productMap:{},
        zengbu:{},
        zengProduct:{},
        list:[],
        stateTip:null,
        merchantId:null,
        orderId:"",
        fixType:"",
        callFee:0
			}
		},
    computed:{
      total(){
        return this.productFee + this.repairFee +Number(this.callFee||0)
      },
      productFee() {
        return this.productMap.countFee + Number(this.zengProduct.totalFee||0)
      },
      repairFee() {
        return this.repairMap.countFee + Number(this.zengbu.totalFee||0)
      },
    },
    onLoad(options) {
      this.orderId = options.orderId || '1587'
      this.stateTip = options.stateTip
      this.merchantId = options.merchantId
      this.fixType = options.fixType
      // if(this.fixType==1){
      //   this.callFee = options.callFee
      // }

      this.$apis.getApi('/order/details',{orderId:this.orderId}).then(({code,result,message})=>{
        if(code==200){
          this.isLoad = true
          this.productMap = result.productMap
          this.repairMap = result.repairMap
          if(result.zbMap&&result.zbMap.list.length){
            this.zengbu = result.zbMap.list[0]
          }
          if(result.otherProductMap&&result.otherProductMap.list.length){
            this.zengProduct = result.otherProductMap.list[0]
          }
          
        } else {
          this.$api.msg(message)
        }
      }).catch(err=>{
        this.$api.msg('订单')
      })
    },
    methods: {
      postUpdate(){
				uni.showModal({
					content: '确认清单是否正确',
					success: (e)=>{
						if(e.confirm){
							this.$apis.postApi('/order/update',{orderId:this.orderId,status:(this.merchantId==0||this.productFee==0)?9:7}).then(({code,message}) => {
								if(code==200){
									this.$api.msg('确认成功');
                  this.$api.prePage().loadData('refresh')
									setTimeout(()=>{
                    uni.navigateBack()
                  }, 800)
								} else {
									this.$api.msg(message);
								}
							}).catch(err=>{
								console.log(err)
							})
						}
					}
				})
			}
    },
	}
</script>

<style scoped lang="scss">
.container{
  padding-bottom: 120upx;
}
.h2{
  font-weight: bold;
  font-size: 30upx;
  padding: 16upx 20upx;
  .right{
    margin-left: auto;
  }
}
.table {
  width: 100%;
  background: #fff;
  .title{
    background-color: #FFF5E1;
    .th{
      color: #666666;
      font-size: 26upx;
      font-weight: 400;
    }
  }
}
.tr{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 80upx;
  position: relative;
}

.th,.td {
  text-align: center;
  word-break: break-all;
  flex:2;
}
.td{
  font-size: 30upx;
  color: #000;
}
.flex4{
  flex: 5;
}
.flexT{
  flex: 5;
  image{
    width: 108upx;
    height: 108upx;
    background: #F0F0F0;
    border-radius: 8upx;
    margin-right: 20upx;
    margin-left: 20upx;
  }
}
.detail{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 108upx;
  margin: 25upx 0;
  text-align: left;
  line-height: 1.1;
  .text{
    font-size: 24upx;
    color: #444444;
    margin-top: 20upx;
  }
}

.total{
  width: 100%;
  height: 100upx;
  justify-content: flex-end;
  background: #fff;
  padding: 0 $page-row-spacing;
  &.fixed{
    padding-right: 26upx;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 12;
    justify-content: flex-start;
    .btn-link{
      margin: 0 0 0 auto;
    }
  }
  .label{
    font-size: 24upx;
    color: #666;
  }
  .price{
    font-size: 36upx;
    font-weight: 500;
    color: #DD0717;
  }
}
.mT2{
  margin-top: 20upx;
}

.cartList{
  position: relative;
}
</style>
